<template>
	<view class="content">
	    <view class="header">
	       <view class="header-text">
            <text class="header-text">分享赚佣金</text>
	        <text class="sub-header-text">帮你找到最佳代理方案</text>
           </view>
            <image class="header-image" src="/static/home1.png" mode="aspectFit" />
	    </view>
	    
	    <view class="options">
	        <view class="option-item">
	            <view class="option-text">
	                <text class="option-title">招募合伙人</text>
	                <text class="option-description">诚邀招募合伙人,携手共创未来</text>
	            </view>
                <view class="option-image-container">
                    <image class="option-image" src="/static/home2.png"  />
                </view>
	        </view>   
	        <view class="option-item">
	           
	            <view class="option-text">
	                <text class="option-title">拓展客户</text>
	                <text class="option-description">寻客定制方案,精准触达客户</text>
	            </view>
                <view class="option-image-container">
                    <image class="option-image" src="/static/home2.png" mode="" />
                </view>
	        </view>
	    </view>
	</view>
</template>

<script setup lang="ts">
// 这里可以添加需要的逻辑
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(180deg, #8EBDF6 0.23%, #B2D2F9 17.22%, #D4E8F8 27.02%, #E8F2FC 99.76%);
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 64rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 60rpx;
		.header-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.header-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.header-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.sub-header-text {
			font-size: 28rpx;
			color: #666;
		}
	}

	.options {

		
		.option-item {
			display: flex;
			align-items: center;
			margin-bottom: 70rpx;
			font-size: 32rpx;
            color:#12285A;
            padding: 56rpx 0;
            position: relative;
            background: linear-gradient(101deg, #E6F2FC 0.95%, #E9FBFA 95.4%);
            border: 2px solid #fff;
            border-radius: 8rpx;
			&:last-child {
				margin-bottom: 0;
			}
			.option-image-container{
                width: 226rpx;
				// height: 100rpx;
				margin-right: 20rpx;
                position: absolute;
                right: 10rpx;
                height: 240rpx;
                bottom: 0;
            }
			.option-image {
                width: 100%;
                height: 100%;
			}
			
			.option-text {
				flex: 1;
                display: flex;
                flex-direction: column;
                padding-left: 40rpx;
                justify-content: center;
				.option-title {
					font-size: 32rpx;
					font-weight: bold;
					
					margin-bottom: 8rpx;
				}
				
				.option-description {
					font-size: 24rpx;
				
				}
			}
		}
	}
</style>
